<template>
    <view class="container">
        <!-- 用户信息区域 -->
        <view class="user-info-section">
            <!-- 退出登录按钮 -->
            <view class="logout-btn" @click="logout">
                <text class="logout-text">退出登录</text>
            </view>

            <!-- 用户头像和姓名 -->
            <view class="user-profile">
                <image class="avatar" :src="userInfo.avatarUrl" mode="aspectFill"></image>
                <view class="user-info">
                    <text class="user-name">{{ userInfo.name }}</text>
                    <text class="gender-value">{{ userInfo.gender }}</text>
                </view>
            </view>

            <!-- 用户基本信息 -->
            <view class="user-info-card">
                <uni-row :gutter="20">
                    <uni-col :span="12">
                        <view class="info-item">
                            <text class="info-label">邮箱：</text>
                            <text class="info-value">{{ userInfo.email }}</text>
                        </view>
                    </uni-col>
                    <uni-col :span="12">
                        <view class="info-item">
                            <text class="info-label">电话：</text>
                            <text class="info-value">{{ userInfo.phone }}</text>
                        </view>
                    </uni-col>
                </uni-row>
                <uni-row>
                    <uni-col>
                        <view class="info-item">
                            <text class="info-label">角色：</text>
                            <text class="info-value">{{ userInfo.role }}</text>
                        </view>
                    </uni-col>
                </uni-row>
                <uni-row>
                    <uni-col>
                        <view class="info-item">
                            <text class="info-label">所属公司：</text>
                            <text class="info-value">{{ userInfo.company }}</text>
                        </view>
                    </uni-col>
                </uni-row>

            </view>
        </view>

        <!-- 菜单列表 -->
        <view class="menu-section">
            <uni-list>
                <uni-list-item v-for="item in menuItems" :key="item.id" :title="item.title" :showArrow="true"
                    :clickable="true" @click="handleMenuClick(item)" class="menu-item">
                    <template #header>
                        <view class="menu-icon">
                            <text class="iconfont" :class="item.icon"> </text>
                        </view>
                    </template>
                </uni-list-item>
            </uni-list>
        </view>


    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getUserProfile } from '@/api/user'
import useUserStore from '@/store/modules/user.js'

// 用户信息
const userInfo = ref({
    name: '张伟',
    gender: '男',
    role: '角色信息',
    phone: '1311111111',
    email: '6778277@qq.com',
    company: '国资集团',
    avatarUrl: ''
})

// 性别映射：0=男，1=女
const mapGender = (val) => (val === 0 || val === '0') ? '男' : (val === 1 || val === '1') ? '女' : (val || '')

// 通过接口获取用户资料
const loadUserProfile = async () => {
    try {
        const res = await getUserProfile()
        const data = res?.data || {}
        userInfo.value.name = data.userName || userInfo.value.name
        userInfo.value.gender = mapGender(data.sex)
        userInfo.value.role = res.roleGroup || userInfo.value.role
        userInfo.value.phone = data.phonenumber || userInfo.value.phone
        userInfo.value.email = data.email || userInfo.value.email
        userInfo.value.company = data.dept.deptName || userInfo.value.company
        userInfo.value.avatarUrl = import.meta.env.VITE_APP_BASE_URL + data.avatar || userInfo.value.avatarUrl
    } catch (e) {
        console.error('获取用户资料失败:', e)
    }
}

onMounted(() => {
    loadUserProfile()
})

// 菜单项配置
const menuItems = ref([
    { id: 2, title: '协议查看', icon: 'icon-rili', path: '/pages/user/children/protocol-view' },
    { id: 6, title: '巡检记录', icon: 'icon-jilu', path: '/pages/user/children/inspection-records' },
    { id: 3, title: '巡检任务', icon: 'icon-shenfengzheng', path: '/pages/user/children/inspection-tasks' },
    { id: 7, title: '密码修改', icon: 'icon-mima', path: '/pages/user/children/change-password' }
])

// 处理菜单点击
function handleMenuClick(item) {
    if (item.path) {
        uni.navigateTo({
            url: item.path
        })
    } else {
        uni.showToast({
            title: `点击了${item.title}`,
            icon: 'none'
        })
    }
}

// 退出登录
function logout() {
    const store = useUserStore()
    uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: async (res) => {
            if (res.confirm) {
                try {
                    uni.showLoading({ title: '正在退出...' })
                    await store.logOut()
                    uni.hideLoading()
                    uni.reLaunch({ url: '/pages/login/login' })
                } catch (e) {
                    uni.hideLoading()
                    uni.showToast({ title: '退出失败，请重试', icon: 'none' })
                }
            }
        }
    })
}

</script>

<style>
.container {
    min-height: 100vh;
    background-color: #f5f5f5;
    position: relative;
}

.user-info-section {
    background: #fff;
    padding: 40rpx 30rpx;
    margin-bottom: 20rpx;
    position: relative;
}

.logout-btn {
    position: absolute;
    top: 40rpx;
    right: 30rpx;
    z-index: 10;
}

.logout-text {
    color: #666;
    font-size: 28rpx;
}

.user-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20rpx;
}

.avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    margin-bottom: 20rpx;
}

.user-name {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
}

.gender-value {
    font-size: 30rpx;
    margin-left: 20rpx;
}

.user-info-card {
    border-radius: 16rpx;
    padding: 20rpx;
}

.info-item {
    margin-bottom: 20rpx;
}

.info-item:last-child {
    margin-bottom: 0;
}

.info-label {
    font-size: 28rpx;
    font-weight: bold;
    width: 160rpx;
    flex-shrink: 0;
}

.info-value {
    font-size: 28rpx;
    color: #000;
    flex: 1;
}

.menu-section {
    background: #fff;
}

.menu-item {
    border-bottom: 1rpx solid #f0f0f0;
}

.menu-item:last-child {
    border-bottom: none;
}

.menu-icon {
    width: 40rpx;
    height: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20rpx;
}

.menu-icon .iconfont {
    font-size: 32rpx;
    color: #333;
}
</style>
